import React from 'react';
import { useLocation } from 'react-router-dom';

const SEOHead = ({ 
  title, 
  description, 
  keywords, 
  image, 
  type = 'website',
  publishedTime,
  modifiedTime,
  author,
  tags = []
}) => {
  const location = useLocation();
  const currentUrl = `https://your-domain.com${location.pathname}`;
  
  // 默认值
  const defaultTitle = '技术博客 - 前端开发、后端技术、系统架构学习分享';
  const defaultDescription = '专业的技术博客，分享前端开发、后端技术、系统架构、DevOps等领域的深度文章和实践经验。';
  const defaultImage = 'https://your-domain.com/og-image.jpg';
  
  const seoTitle = title ? `${title} - 技术博客` : defaultTitle;
  const seoDescription = description || defaultDescription;
  const seoImage = image || defaultImage;
  const seoKeywords = keywords || tags.join(', ');

  React.useEffect(() => {
    // 动态更新页面标题
    document.title = seoTitle;
    
    // 更新meta标签
    const updateMetaTag = (name, content, property = false) => {
      const selector = property ? `meta[property="${name}"]` : `meta[name="${name}"]`;
      let meta = document.querySelector(selector);
      
      if (!meta) {
        meta = document.createElement('meta');
        if (property) {
          meta.setAttribute('property', name);
        } else {
          meta.setAttribute('name', name);
        }
        document.head.appendChild(meta);
      }
      
      meta.setAttribute('content', content);
    };
    
    // 更新基本meta标签
    updateMetaTag('description', seoDescription);
    updateMetaTag('keywords', seoKeywords);
    
    // 更新Open Graph标签
    updateMetaTag('og:title', seoTitle, true);
    updateMetaTag('og:description', seoDescription, true);
    updateMetaTag('og:url', currentUrl, true);
    updateMetaTag('og:image', seoImage, true);
    updateMetaTag('og:type', type, true);
    
    if (publishedTime) {
      updateMetaTag('article:published_time', publishedTime, true);
    }
    
    if (modifiedTime) {
      updateMetaTag('article:modified_time', modifiedTime, true);
    }
    
    if (author) {
      updateMetaTag('article:author', author, true);
    }
    
    // 更新Twitter Card标签
    updateMetaTag('twitter:title', seoTitle);
    updateMetaTag('twitter:description', seoDescription);
    updateMetaTag('twitter:image', seoImage);
    
    // 更新canonical链接
    let canonical = document.querySelector('link[rel="canonical"]');
    if (!canonical) {
      canonical = document.createElement('link');
      canonical.setAttribute('rel', 'canonical');
      document.head.appendChild(canonical);
    }
    canonical.setAttribute('href', currentUrl);
    
    // 添加结构化数据
    if (type === 'article' && title) {
      const structuredData = {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "headline": title,
        "description": seoDescription,
        "image": seoImage,
        "url": currentUrl,
        "datePublished": publishedTime,
        "dateModified": modifiedTime || publishedTime,
        "author": {
          "@type": "Person",
          "name": author || "技术博主"
        },
        "publisher": {
          "@type": "Organization",
          "name": "技术博客",
          "logo": {
            "@type": "ImageObject",
            "url": "https://your-domain.com/logo.png"
          }
        },
        "mainEntityOfPage": {
          "@type": "WebPage",
          "@id": currentUrl
        },
        "keywords": tags,
        "inLanguage": "zh-CN"
      };
      
      let script = document.querySelector('script[type="application/ld+json"][data-page="article"]');
      if (!script) {
        script = document.createElement('script');
        script.type = 'application/ld+json';
        script.setAttribute('data-page', 'article');
        document.head.appendChild(script);
      }
      script.textContent = JSON.stringify(structuredData);
    }
    
  }, [seoTitle, seoDescription, seoImage, seoKeywords, currentUrl, type, publishedTime, modifiedTime, author, tags]);

  return null; // 这个组件不渲染任何内容
};

export default SEOHead;
